<template>
  <div class="app-container bigbox">
    <div class="gonggao">
      <img src="@/assets/img/5.png" alt="" style="width: 32px;height: 28px;" />
      <div style="margin-left: 20px;cursor: pointer;" @click="see(notice)"> {{ notice.noticeTitle }}
      </div>
    </div>
    <div class="b_box">
      <div class="b_box_l">
        <div class="title">
          数据统计
        </div>
        <div class="title_lb">
          <div class="tj_box" style="background-color: #909399">
            <div>本日新增</div>
            <div>{{del.todayQuantity}}</div>
          </div>
          <div class="tj_box" style="background-color: #b398e5;">
            <div>本周新增</div>
            <div>{{del.weekQuantity}}</div>
          </div>
          <div class="tj_box" style="background-color: #E6A23C;">
            <div>本月新增</div>
            <div>{{del.monthQuantity}}</div>
          </div>
          <div class="tj_box" style="background-color: #409EFF;">
            <div>信件总数</div>
            <div>{{del.todayQuantity}}</div>
          </div>
          <div class="tj_box" style="background-color: #67C23A;">
            <div>已处理信件</div>
            <div>{{del.processedTotal}}</div>
          </div>
          <div class="tj_box" style="background-color: #F56C6C;">
            <div>待处理信件</div>
            <div>{{del.pendingTotal}}</div>
          </div>
        </div>
        <div style="margin-top:20px;display: flex;align-self: flex-start;">
          <div style="width: 42%;height: 78vh;">
            <div style="display:flex;justify-content: space-between;align-items: center;">
              <div class="title" style="display: flex;align-items: center;">
                <!-- <img style="width: 28px;height: 28px;margin-right: 20px;" src="@/assets/img/rk.png" alt="" /> -->
                <div>处理效率统计</div>
              </div>

            </div>
            <div style="height: calc(100% - 190px);">
              <StationBar height="100%" :chartData="barChartData" :xName="barXName" />
            </div>
          </div>
          <div style="width: 42%;">
            <div class="title" style="display: flex;align-items: center;">
              <!-- <img style="width: 28px;height: 28px;margin-right: 20px;" src="@/assets/img/rk.png" alt="" /> -->
              <div>每日信件趋势图</div>
            </div>
            <div style="height: calc(100% - 190px);">
              <StationLine height="100%" itemColor="#ee4368" yName="件" :chartData="lineDataOne" />
            </div>
          </div>
          <div class="b_box_r">
            <div class="title" style="display: flex;align-items: center;">
               <div>快捷入口</div>
            </div>
            <div>
              <router-link class="rukou" to="/statistics">
                <img src="@/assets/img/1.png" alt="" />
                <div>数据统计</div>
              </router-link>
              <router-link class="rukou" to="/system/dept">
                <img src="@/assets/img/2.png" alt="" />
                <div>部门管理</div>
              </router-link>
              <router-link class="rukou" to="/system/user">
                <img src="@/assets/img/3.png" alt="" />
                <div>用户管理</div>
              </router-link>
              <router-link class="rukou" to="/message">
                <img src="@/assets/img/4.png" alt="" />
                <div>信件管理</div>
              </router-link>
            </div>
          </div>
        </div>
      </div>

    </div>
    <el-dialog title="查看公告详情" v-model="openSee" width="780px" append-to-body>
      <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="公告标题">
              <el-input disabled v-model="formSee.noticeTitle" placeholder="请输入公告标题" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="公告类型">
              <el-select disabled style="width: 100%;" v-model="formSee.noticeType" placeholder="请选择公告类型">
                <el-option v-for="dict in sys_notice_type" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态">
              <el-radio-group disabled v-model="formSee.status">
                <el-radio v-for="dict in sys_notice_status" :key="dict.value"
                  :label="dict.value">{{ dict.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容">
              <editor disabled v-model="formSee.noticeContent" :min-height="192" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">

          <el-button @click="openSee=false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Stationtable">
  import {
    ref,
    onBeforeUnmount
  } from 'vue';
  import {
    listNotice,
    newest,
  } from "@/api/system/notice";

  import StationBar from '../../components/StationBar.vue'
  import StationLine from '../../components/StationLine.vue'
  const {
    proxy
  } = getCurrentInstance();
  const {
    sys_notice_status,
    sys_notice_type
  } = proxy.useDict("sys_notice_status", "sys_notice_type");

  const openSee = ref(false);


  const timer = ref(null); // 当前公告
  const notice = ref(""); // 当前公告

  const index = ref(0) // 当前公告在数组中的索引
  const noticeList = ref([]); // 存储所有公告数据的数组
  const data = reactive({
    del: {},
    queryParams: {
      pageNum: 1,
      pageSize: 99999,

    },
    formSee: {},
    form: {},
    queryParams: {},
    rules: {}
  });

  const {
    del,
    queryParams,
    form,
    formSee,
    rules
  } = toRefs(data);
  /** 查询公告列表 */
  function getList() {

    listNotice(queryParams.value).then(response => {
      noticeList.value = response.rows;


    });
  }
  // 统计
  function getNewest() {

    newest().then(response => {
      del.value = response


    });
  }
  /**查看按钮操作 */
  function see(row) {
    formSee.value = {}
    formSee.value = row;
    openSee.value = true;
  }
  onBeforeUnmount(() => {
    if (timer.value) {
      clearInterval(timer.value);
      console.log('定时器已清除');
    }
  });
  timer.value = setInterval(() => {
    if (index.value == noticeList.value.length) {
      index.value = 0
    } // 判断索引是否越界，越界则从头开始
    console.log(index.value)
    notice.value = noticeList.value[index.value]; // 修改数据
    index.value++; // 索引+1
  }, 3000) // 定时2秒修改一次
  getList()
  getNewest()
</script>
<style>
  .bigbox {
    background-color: #f9f9f9;
    height: 91vh;
  }

  .gonggao {
    width: 100%;
    background-color: #fff;
    height: 50px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .b_box {
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between
  }

  .b_box_l {
    width: 100%;
    background-color: #fff;
    height: auto;
    border-radius: 4px;
    padding: 20px;

  }

  .b_box_r {
    width: 16%;
    background-color: #fff;
    border-radius: 4px;
    height: auto;

  }

  .title {
    width: 100%;
    font-weight: 500;
    color: #333;
  }

  .title_lb {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 10px;
  }

  .tj_box {
    width: 16%;
    height: 100px;
    border-radius: 4px;
    display: flex;
    background-color: #196bff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 18px;
    font-weight: 600;
  }

  .tj_box:hover {
    width: 16%;
    height: 110px;
    border-radius: 4px;
    display: flex;
    background-color: #196bff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 20px;
    font-weight: 700;
  }

  .tj_box>div:nth-of-type(1) {


    color: #fff;
    margin-top: 8px;
  }

  .tj_box>div:nth-of-type(2) {
    font-size: 30px;

    color: #fff;
    margin-top: 8px;
  }

  .rukou {

    margin-top: 20px;
    width: 100%;
    border: 1px solid #eee;
    font-size: 16px;
    border-radius: 5px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 500;
    color: #000;
  }

  .rukou:hover {
    margin-top: 20px;
    width: 100%;
    font-size: 20px;
    box-shadow: 2px 2px 2px 2px rgba(233, 233, 233, 0.6);
    border-radius: 5px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;

    font-weight: 600;
  }

  .rukou>img {
    height: 35px;
    height: 35px;
  }

  .rukou>div {
    color: #333;


    margin-left: 20px;
    padding-top: 6px;
  }
</style>
